<template>
  <div class="home">
    <div style="margin-top: 40px">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img src="../../public/img/11.jpeg">
        </van-swipe-item>
        <van-swipe-item class="tupian">
          <img src="../../public/img/12.jpeg">
        </van-swipe-item>
        <van-swipe-item><img src="../../public/img/13.jpeg"></van-swipe-item>
        <van-swipe-item><img src="../../public/img/14.jpeg"></van-swipe-item>
      </van-swipe>
    </div>
    <div>
      <van-grid>
        <van-grid-item :icon="require('@/assets/imgs/jiaxiao.png')" text="找驾校" />
        <van-grid-item :icon="require('@/assets/imgs/jiaolian.png')" text="找教练" />
        <van-grid-item :icon="require('@/assets/imgs/peilian.png')" text="找陪练" />
        <van-grid-item :icon="require('@/assets/imgs/jiakaoquan.png')" text="驾考圈" />
      </van-grid>
    </div>
    <div>
      <van-grid direction="horizontal" :column-num="2">
        <van-grid-item :icon="require('@/assets/imgs/考试1.png')" text="科目一理论考试" />
        <van-grid-item :icon="require('@/assets/imgs/考试4.png')" text="科目四理论考试" />
      </van-grid>
    </div>
    <div class="jiaxiao">
      <div class="jiaxiao-nav" style="border-bottom: 1px solid #f6f6f6;">
        <p >
          &nbsp;&nbsp;教练排名<span><router-link to="#" style="text-decroation:none;color:black;">更多<van-icon name="arrow" />&nbsp;&nbsp;</router-link></span>
        </p>
      </div>
      <div class="touxiang" v-for="(item,i) in cats" :key="i">
            <div @click="jiaolian" class="lie">
              <div><img :src="`/img/${cats[i].uid}.jpg`"></div>
              <div class="aname">{{cats[i].aname}}</div>
              <div class="price">￥:{{cats[i].price}}</div>
              <div class="score1">评分:{{cats[i].score1}}</div>
            </div>
      </div>      
        
    </div>
    <div class="jiaxiao">
      <div class="jiaxiao-nav" style="border-bottom: 1px solid #f6f6f6;">
        <p >
          &nbsp;&nbsp;驾校排名<span><router-link to="#" style="text-decroation:none;color:black;">更多<van-icon name="arrow" />&nbsp;&nbsp;</router-link></span>
        </p>
      </div>
      <div class="touxiang" v-for="(item,i) in jia" :key="i">
            <div @click="jiaolian" class="lie">
              <div><img :src="`/img/${jia[i].image}`"></div>
              <div class="aname">{{jia[i].uname}}</div>
              <div class="price">￥:{{jia[i].score}}</div>
              <div class="score2">评分:{{jia[i].fuwu}}</div>
            </div>
      </div>      
        
    </div>
  </div>
</template>
<style scoped>

/* .my-swipe .van-swipe-item {
  /* color: #fff;
  font-size: 18px;
  line-height: 150px;
  text-align: center; */
/*} */
.my-swipe img{
  width: 375px;
  height: 210px;
}
.jiaxiao span {
  float: right;
  
}
.jiaxiao li{
  height: 100px;
  border: 1px solid #f6f6f6;
  line-height: 100px;
}
.touxiang{
  width: 375px;
  height: 80px;
  border: 1px solid blanchedalmond;
  position: relative;
}
.touxiang img{
   width: 70px; height: 70px; left: 5px; top: 5px;
   position: absolute;
}
.aname{
  position: absolute;
  left: 100px;
  top: 5px;
  font-weight: 600;
  font-size: 17px;
  color: #1a1a1a;
  line-height: 22px;
}
.price{
  position: absolute;
  left: 100px;
  top: 30px;
  font-weight: 600;
  font-size: 17px;
  color: #1a1a1a;
  line-height: 22px;
}
.score1{
  position: absolute;
  left: 100px;
  top: 50px;
  font-weight: 600;
  font-size: 17px;
  color: #1a1a1a;
  line-height: 22px;
}
.score2{
  position: absolute;
  left: 100px;
  top: 50px;
  font-weight: 400;
  font-size: 14px;
  color: #1a1a1a;
  line-height: 22px;
}  
</style>
<script>
export default {
  data(){
    return{
       cats:[],
       jia:[],
    }
  },
  mounted() {
    this.axios.get(`/jiaolian`).then((result) => {
      // console.log(result);
      this.cats = result.data.results;
      // this.aname = result.data.results[0].aname
      // console.log(this.cats);
    });
    this.axios.get(`/jiaxiao`).then((result) => {
      // console.log(result);
      this.jia = result.data.results;
    })
  },
  methods: {
    onClickRight() {
      Toast("按钮");
    },
    jiaolian(){
        this.$router.push("/jiaolian");
    }
  },
};
</script>
